<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画片详情</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .user-info img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .image-display {
            text-align: center;
            margin-bottom: 20px;
        }
        .image-display img {
            height: 300px;
            border-radius: 10px;
            cursor: pointer;
        }
        .description, .parameters, .actions, .comments {
            margin-bottom: 20px;
        }
        .parameters {
            display: flex;
            gap: 20px;
        }
        .actions {
            display: flex;
            gap: 10px;
        }
        .actions button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .actions button:hover {
            background-color: #0056b3;
        }
        .comment-form {
            margin-bottom: 20px;
        }
        .comment-form textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: vertical;
        }
        .comment-form button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .comment-form button:hover {
            background-color: #218838;
        }
        .comment-list {
            margin-top: 20px;
        }
        .comment {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .comment img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .comment-content {
            flex: 1;
        }
        .comment-content h4 {
            margin: 0 0 5px;
            font-size: 16px;
        }
        .comment-content p {
            margin: 0;
            font-size: 14px;
            color: #333;
        }
        .comment-content small {
            color: #777;
        }
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
        }
        .modal img {
            max-width: 90%;
            max-height: 90%;
        }
        .modal.active {
            display: flex;
        }
        .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #fff;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 标题 -->
        <h1 id="image-title">作品标题</h1>

        <!-- 用户信息 -->
        <div class="user-info">
            <img src="./2420.jpg_wh860.jpg" alt="用户头像">
            <span>用户名</span>
        </div>

        <!-- 图片展示 -->
        <div class="image-display">
            <img id="main-image" src="" alt="作品图片" onclick="openModal(this.src)">
        </div>

        <!-- 文本介绍 -->
        <div class="description">
            <h2>作品介绍</h2>
            <p id="image-description">这里是作品的详细介绍内容。</p>
        </div>

        <!-- 标签栏 -->
        <h3>标签</h3> 
        <div class="tags" id="tags">
            
            <!-- 标签将通过JavaScript动态加载 -->
        </div>

        <!-- 参数信息 -->
        <div class="parameters">
            <div>
                <h3>风格参数 (--sref)</h3>
                <p id="style-params">风格参数描述</p>
            </div>
            <div>
                <h3>角色参数 (--cref)</h3>
                <p id="character-params">角色参数描述</p>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
            <button>复制参数</button>
            <button>收藏</button>
            <button>下载</button>
            <button>分享</button>
        </div>

        <!-- 评论区 -->
        <div class="comments">
            <h2>评论区</h2>
            <!-- 评论输入框 -->
            <div class="comment-form">
                <textarea placeholder="写下你的评论..."></textarea>
                <button onclick="addComment()">提交评论</button>
            </div>
            <!-- 评论列表 -->
            <div class="comment-list" id="comment-list">
                <!-- 示例评论 -->
                <div class="comment">
                    <img src="./2420.jpg_wh860.jpg" alt="用户1头像">
                    <div class="comment-content">
                        <h4>用户1</h4>
                        <p>这个作品太棒了！</p>
                        <small>2023-10-01 12:34</small>
                    </div>
                </div>
                <div class="comment">
                    <img src="./2420.jpg_wh860.jpg" alt="用户2头像">
                    <div class="comment-content">
                        <h4>用户2</h4>
                        <p>颜色搭配非常出色！</p>
                        <small>2023-10-02 15:20</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片放大模态框 -->
    <div class="modal" id="image-modal">
        <span class="close" onclick="closeModal()">&times;</span>
        <img id="modal-image" src="" alt="放大图片">
    </div>

    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 从URL中获取图片ID
        function getImageIdFromUrl() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('image_id');
        }

        // 获取图片详情
        async function fetchImageDetails(imageId) {
            try {
                const response = await axios.get(`http://127.0.0.1:5000/image/${imageId}`);
                console.log('Image details:', response.data);
                return response.data;
            } catch (error) {
                console.log('Error fetching image details:', error);
            }
        }

        // 渲染图片详情
        function renderImageDetails(image) {
            document.getElementById('image-title').textContent = image.image_title;
            document.getElementById('image-description').textContent = image.image_description;
        //    document.getElementById('style-params').textContent = image.image_tag1;
        //    document.getElementById('character-params').textContent = image.image_tag2;

            // 渲染图片
            document.getElementById('main-image').src=image.oss_path;
            console.log('oss image:', image.oss_path);

            // 渲染标签
            const tagsContainer = document.getElementById('tags');
            const tags = [image.image_tag1, image.image_tag2, image.image_tag3].filter(tag => tag); // 过滤空标签
            tagsContainer.innerHTML = tags.map(tag => `<span>${tag}</span>,`).join('');
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', async () => {
            const imageId = getImageIdFromUrl();
            if (imageId) {
                const imageDetails = await fetchImageDetails(imageId);
                if (imageDetails) {
                    renderImageDetails(imageDetails);
                    console.log('Image details rendered.',imageDetails);
                }
            } else {
                alert('未找到图片ID！');
            }
        });

        // 打开模态框
        function openModal(imageSrc) {
            const modal = document.getElementById('image-modal');
            const modalImage = document.getElementById('modal-image');
            modalImage.src = imageSrc;
            modal.classList.add('active');
        }

        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('image-modal');
            modal.classList.remove('active');
        }

        // 添加评论功能
        function addComment() {
            const commentInput = document.querySelector('.comment-form textarea');
            const commentText = commentInput.value.trim();
            if (commentText === "") {
                alert("评论内容不能为空！");
                return;
            }

            // 创建新评论
            const commentList = document.getElementById('comment-list');
            const newComment = document.createElement('div');
            newComment.classList.add('comment');
            newComment.innerHTML = `
                <img src="default-avatar.jpg" alt="默认头像">
                <div class="comment-content">
                    <h4>新用户</h4>
                    <p>${commentText}</p>
                    <small>刚刚</small>
                </div>
            `;

            // 添加到评论列表顶部
            commentList.insertBefore(newComment, commentList.firstChild);

            // 清空输入框
            commentInput.value = "";
        }
    </script>
</body>
</html>